<!--  frame 模板 -->
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="divport" content="width=device-width,initial-scale=1,user-scalable=no" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
	<title>商品详情</title>
	<link rel="stylesheet" href="../plugin/hhframe/hhframe.min.css" />
	<link rel="stylesheet" href="../style/index.css" />
	<link rel="stylesheet" href="../plugin/swiper5/css/swiper.min.css">

	<style>
		body {
			background-color: #F8F8F8;
		}
		/* 顶部商品背景图 */

		.bg_banner {
			position: relative;
		}

		.swiper-container {
			width: 100%;
			height: 5.73rem;
		}

		.swiper-pagination-bullet-active {
			background-color: #000
		}

		.bg_img {
			display: block;
			width: 100%;
			height: 5.73rem;
		}
		/* .com {
  width: 60rem;
  height: 60rem;
  line-height: 60rem;
  span-align: center;
  color: #fff;
}

.back {
  position: absolute;
  left: 22rem;
  top: 54rem;
  transform: rotate(180deg);
  font-size: 35rem;
}

.share {
  position: absolute;
  right: 22rem;
  top: 54rem;
  font-size: 42rem;
}  */
		/* 商品预售 */

		.product_presell {
			position: relative;
			background: #fff;
			margin-bottom: 0.20rem;
			padding-top: 1px;
			z-index: 200;
		}

		.presell_info .wrap {
			display: flex;
			width: 100%;
			height: 1rem;
			margin-top: -0.50rem;
			margin-bottom: 0.30rem;
			line-height: 1rem;
			border-radius: 0.50rem;
			background: #ffe8e3;
		}

		.ProductInfo {
			display: flex;
			justify-content: space-between;
			margin: 0.40rem 0.40rem 0.20rem;
			border: 0px solid #f00;
		}

		.ProductInfo .price {
			font-size: 0.50rem;
			color: #ff502d;
		}

		.ProductInfo .price span {
			font-size: 0.40rem;
		}

		.ProductInfo .sold_num {
			display: block;
			font-size: 0.28rem;
			margin-top: 0.25rem;
			color: #999;
		}

		.pre_left {
			flex: auto;
			width: 4.92rem;
			border-radius: 0.50rem;
			background: #ff502d;
		}

		.price_flag {
			margin-left: 0.41rem;
			font-size: 0.40rem;
			color: #fff;
		}

		.price {
			font-size: 0.50rem;
			color: #fff;
		}

		.sold_num {
			margin-left: 0.20rem;
			font-size: 0.28rem;
			color: #fff;
		}

		.pre_right {
			text-align: center;
			line-height: 0.40rem;
		}

		.pre_end {
			width: 1.82rem;
			height: 0.24rem;
			line-height: 0.24rem;
			font-size: 0.24rem;
			color: #9d2007;
			margin: 0.18rem 0.34rem 0.08rem 0.34rem;
		}

		.pre_time {
			width: 1.82rem;
			height: 0.34rem;
			line-height: 0.34rem;
			font-size: 0.24rem;
			color: #fff;
			border-radius: 0.17rem;
			margin: 0 0.34rem;
			background: #f33610;
		}

		.product_title {
			width: 6.75rem;
			line-height: 0.45rem;
			margin-left: 0.37rem;
			margin-bottom: 0.10rem;
			font-size: 0.32rem;
			font-weight: 800;
		}

		.product_intro {
			width: 6.75rem;
			line-height: 0.36rem;
			margin-left: 0.37rem;
			padding-bottom: 0.30rem;
			font-size: 0.24rem;
			color: #999;
		}
		/* 选择参数 */

		.commodity_param {
			background: #fff;
			border-radius: 0.20rem;
		}

		.com_select,
		.com_carriage {
			height: 0.90rem;
			line-height: 0.90rem;
			margin: 0 0.30rem;
			padding-left: 0.10rem;
			font-size: 0.24rem;
			color: #999;
		}

		.bd_b {
			border-bottom: 1px solid #eee;
		}

		.sel_bg {
			opacity: 0.4;
		}
		/* 商品信息 */

		.commodity_info {
			margin-bottom: 1.20rem;
		}

		.commodity_title {
			height: 0.90rem;
			line-height: 0.90rem;
			text-align: center;
			font-size: 0.32rem;
			color: #333;
		}

		.commodity_content img {
			width: 100%;
		}

		.com_img {
			width: 100%;
			height: 7.89rem;
			margin-bottom: 0.15rem;
			border-radius: 0.20rem;
		}
		/* 底部 */

		.footer {
			position: fixed;
			left: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			width: 100%;
			height: 1rem;
			background: #fff;
			border: 1px solid #eee;
		}

		.item,
		.kefu {
			display: flex;
			flex-direction: column;
			text-align: center;
			margin: 0 0.16rem 0 0.20rem;
			background: #fff;
		}

		.kefu_btn {
			width: 0.50rem;
			height: 0.90rem;
			display: flex;
			flex-direction: column;
			margin-top: 0.1rem;
		}

		.kefu::after {
			display: none;
		}

		.kefu_icon {
			font-size: 0.36rem;
			color: #262626;
			margin-top: 0.01rem;
		}

		.item_span {
			font-size: 0.24rem;
			color: #262626;
		}

		.f_icon {
			font-size: 0.36rem;
			color: #262626;
		}

		.num {
			position: absolute;
			left: 0.42rem;
			top: 0;
			min-width: 0.22rem;
			height: 0.22rem;
			font-size: 0.20rem;
			line-height: 0.22rem;
			color: #fff;
			text-align: center;
			background: #ff502d;
			border-radius: 50%;
		}

		.btn_box {
			flex: auto;
			height: 0.76rem;
			width: 2.20rem;
			text-align: right;
		}

		button {
			border: none;
			outline: none;
		}

		.btn {
			width: 95%;
			height: 0.76rem;
			line-height: 0.76rem;
			border-radius: 0.38rem;
			font-size: 0.28rem;
			color: #fff;
		}

		.bg1 {
			background: #ffb800;
			margin-right: 0.14rem;
		}

		.bg2 {
			background: #ff502d;
			margin-right: 0.24rem;
		}
		/* 选择商品类别 */

		.mr_b_25 {
			margin-bottom: 0.25rem;
		}

		.mr_r_32 {
			margin-right: 0.32rem;
		}

		.mask {
			position: fixed;
			left: 0;
			top: 0;
			height: 100%;
			width: 100%;
			background: rgba(0, 0, 0, 0.7);
			overflow: hidden;
		}

		.commodity_box {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 8.76rem;
			background: #fff;
			border-radius: 0.20rem 0.20rem 0 0;
		}

		.com_info {
			display: flex;
		}

		.com_l {
			width: 2.20rem;
			height: 2.20rem;
			border-radius: 0.10rem;
			margin: 0.30rem;
		}

		.com_r {
			position: relative;
			flex: auto;
		}

		.com_r_item {
			position: absolute;
			left: 0;
			bottom: 0.34rem;
		}

		.com_sign {
			font-size: 0.24rem;
			color: #ff502d;
		}

		.com_price {
			font-size: 0.60rem;
			color: #ff502d;
		}

		.com_name,
		.com__c_title,
		.com_b_title {
			font-size: 0.28rem;
			color: #999;
		}

		::-webkit-scrollbar {
			width: 0;
			height: 0;
			color: transparent;
		}

		.scroll-div {
			padding-top: 0.25rem;
			height: 4.65rem;
		}

		.com_category {
			padding: 0 0.30rem;
		}

		.pick_item {
			display: inline-block;
			height: 0.60rem;
			line-height: 0.60rem;
			padding: 0 0.31rem;
			font-size: 0.30rem;
			border-radius: 0.30rem;
			margin-right: 0.20rem;
			margin-bottom: 0.20rem;
			border: 1px solid #999;
		}

		.active {
			border: 1px solid #f0ad4d;
			color: #f0ad4d;
		}

		.com_buy {
			display: flex;
			align-items: center;
			padding-left: 0.30rem;
		}

		.com_b_title {
			flex: auto;
		}

		.com_b_num {
			display: flex;
		}

		.num_sub,
		.num_add {
			width: 0.39rem;
			height: 0.39rem;
			line-height: 0.39rem;
			text-align: center;
			background: #eee;
			font-size: 0.45rem;
			border-radius: 0.10rem;
		}

		.sub_icon,
		.add_icon {
			width: 0.39rem;
			height: 0.39rem;
		}

		.num_span {
			width: 0.75rem;
			height: 0.39rem;
			min-height: 0.39rem;
			margin-top: -0.02rem;
			text-align: center;
			font-size: 0.28rem;
			color: #333;
		}

		.com_btn_box {
			position: fixed;
			left: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			width: 100%;
			height: 1rem;
			border-top: 1px solid #eee;
		}

		.com_btn {
			height: 0.76rem;
			line-height: 0.76rem;
			width: 3.39rem;
			font-size: 0.28rem;
			color: #fff;
			border-radius: 0.38rem;
		}

		.bg_1 {
			background: #ffb800;
		}

		.bg_2 {
			background: #ff502d;
		}

		.bg_c {
			opacity: 0.6;
		}
	</style>
</head>

<body>
	<div class="content app" v-cloak>
		<!-- 顶部商品背景图 -->
		<div class="bg_banner">
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide" v-for="(item,index) in Banner" :key="index">
						<img class="bg_img" :src="item+'?imagediv2/1/w/375/h/286'" />
					</div>
				</div>
				<div class="swiper-pagination"></div>
			</div>
			<!-- <div class="iconfont iconxiayibu back com" @click="btnBack"></div>
	<div class="iconfont iconfenxiang share com"></div> -->
		</div>
		<!-- 商品预售-->
		<div class="product_presell">
			<div class="presell_info" v-if="type==2">
				<div class="wrap">
					<div class="pre_left">
						<span class="price_flag">¥</span>
						<span class="price">{{product.price}}</span>
						<span class="sold_num">{{product.sale_count}} 件已售</span>
					</div>
					<div class="pre_right">
						<div class="pre_end">距预售结束</div>
						<div class="pre_time">{{counter}}</div>
					</div>
				</div>
			</div>
			<div class="ProductInfo" v-if="type==1">
				<span class="price"><span>￥</span>{{product.price}}</span>
				<span class="sold_num">{{product.sale_count}} 已售</span>
			</div>
			<div class="product_title">{{product.product_name}}</div>
			<div class="product_intro">{{product.introduce_reason||""}}</div>
		</div>
		<!-- 选择参数-->
		<div class="commodity_param">
			<!-- <div class="com_select bd_b" @click="OpenSku(type==1?'both':'buy')" v-if="options.skus&&options.skus.length">选择参数 {{payment.chosen}}</div> -->
			<div class="com_carriage">运费：{{product.post_fee?product.post_fee+"元":"商家免运费"}}</div>
		</div>
		<!--商品信息-->
		<div class="commodity_info">
			<div class="commodity_title">商品信息</div>
			<div class="commodity_content">
				<div v-html="content"></div>
			</div>
		</div>

		<!-- 底部-->
		<div class="footer">
			<button class="kefu" open-type="contact" session-from="detail">
	      <div class="kefu_btn">
		      <div class="iconfont iconpingjia- kefu_icon"></div>
		      <div class="item_span">客服</div>
	      </div>
    </button>
			<div class="item" @click="Collection(product.id)">
				<div v-if="isCollection" class="iconfont iconshoucang1 f_icon"></div>
				<div v-else class="iconfont iconshoucang f_icon"></div>
				<span class="item_span">收藏</span>
			</div>
			<div class="item" @click="shop_cart">
				<div class="iconfont icongouwuche f_icon"></div>
				<span class="item_span">购物车</span>
			</div>
			<div class="btn_box" v-if="type==1">
				<button class="btn bg1" @click="OpenSku('cart')">加入购物车</button>
			</div>
			<div class="btn_box" v-if="type==1">
				<button class="btn bg2" @click="OpenSku('buy')">立即购买</button>
			</div>
			<div class="btn_box" v-if="type==2">
				<button class="btn bg2" @click="OpenSku('buy')">支付定金 ￥{{product.preordain_front_money||0}}</button>
			</div>
		</div>

		<hh-sku-panel :options="options" :is-show.sync="payment.show" @choose="Choose"></hh-sku-panel>
		<!-- <hhSku2Panel mode="{{mode}}" options="{{options}}" bind:onInit="SkuInit" bind:onChange="SkuChange" bind:onSubmit="SkuSubmit"></hhSku2Panel> -->

	</div>
</body>
<script src="../plugin/jquery.js"></script>
<script src="../plugin/vue.all.js"></script>
<script src="../plugin/hhframe/hhframe.min.js"></script>
<script src="../plugin/public.js"></script>
<script src="../plugin/swiper5/js/swiper.min.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
	window.addEventListener("apiready", function() {
		index()
	});
	var id = localdata.get('productId')

	function index() {
		var vm = new Vue({
			el: ".app",
			data: {
				id: "",
				type: "", // 商品类型（普通、预售）
				mode: "",
				options: {},
				product: '',
				isCollection: '',
				payment: {
					show: false,
					price: 0,
					skuid: "",
					num: 0
				},
				// payment: {
				// 	inst: null,
				// 	chosen: "",
				// 	price: 0,
				// 	skuid: "",
				// 	num: 0
				// },
				Banner: [], // 轮播图
				content: "", // 商品内容
				finish: "", // 预售结束时间
				counter: "", // 倒计时
				timer: "", // 计时器
			},
			mounted: function() {
				this.getCommodity(true)
				this.setCustomRefreshHeaderInfo()
				var mySwiper = new Swiper('.swiper-container', {
					speed: 300,
					initialSlide: 0,
					observer: true, //修改swiper自己或子元素时，自动初始化swiper
					　　observeParents: true, //修改swiper的父元素时，自动初始化swiper
					autoplay: {
						delay: 3000,
						disableOnInteraction: false
					}, //可选选项，自动滑动
					pagination: {
						el: '.swiper-pagination'
					}, //实现底部小圆点
				})
			},
			methods: {
				//下拉刷新
				setCustomRefreshHeaderInfo: function() {
					api.setCustomRefreshHeaderInfo({
						bgColor: '#eee',
						tips: {
							pull: '下拉刷新',
							threshold: '松开立即刷新',
							load: '正在刷新'
						}
					}, function() {
						vm.getCommodity(true)
					});
				},

				//获取商品详情
				getCommodity: function(loader) {
					AjaxSafe({
						url: '/xapp/app/product/detail',
						data: {
							id: id
						},
						loader: loader,
						success: function(ret) {
							if (ret.state) {
								//console.log(ret.data)
								var d = ret.data;
								var product = d.product;
								// 设置
								vm.type = product.attr_type;
								vm.finish = product.preordain_end_time;
								vm.isCollection = d.isCollection;
								vm.Banner = d.banner;
								vm.product = d.product;
								vm.content = (product.product_content || "").replace(/<img/g, "<img style=\"max-width:100%;\"");
								vm.options = {
										skus: JSON.parse(product.sku_json),
										stocks: JSON.parse(d.stock_text),
										stock: product.stock_count,
										thumbs: JSON.parse(product.sku_thumb_json),
										thumb: product.image_center,
										price: product.price,
										limit: product.restrictions_buy_num,
										theme: "gexin"
									}
									// 倒计时
								vm.Counter();
							}
							api.refreshHeaderLoadDone() //关闭下拉刷新状态
						},
						failed: function(err) {
							api.refreshHeaderLoadDone() //关闭下拉刷新状态
							alert("网络故障！");
						}
					})
				},

				// 选择 SKU
				Choose: function(ret) {
					this.payment.skuid = ret.skuid;
					this.payment.price = ret.price;
					this.payment.num = ret.num;
					if (vm.mode == "cart") {
						//hhPanel.msg("假设已经加入购物车");
						vm.addCart(id, ret.skuid, ret.num)
					} else {
						vm.buy(id, ret.skuid, ret.num)
					}
				},

				// 立即购买逻辑
				buy: function(goodid, skuid, num) {
					AjaxSafe({
						url: "/xapp/order/buy",
						data: {
							products: [{
								id: goodid,
								skuid: skuid,
								num: num
							}]
						},
						success: function(ret) {
							if (ret.state) {
								vm.payment.show = false;
								order_create(ret.data)
							} else
								hhPanel.msg(ret.msg);
						}
					})
				},

				//添加到购物车逻辑
				addCart: function(goodid, skuid, num) {
					AjaxSafe({
						url: "/xapp/app/product/addCart",
						data: {
							product_id: goodid,
							sku_id: skuid,
							buy_count: num
						},
						success: function(ret) {
							if (ret.state) {
								vm.payment.show = false;
								api.sendEvent({name: 'evt_CartChange'});
								hhPanel.msg(ret.msg);
							}else
							hhPanel.msg(ret.msg);
						}
					});
				},

				// 倒计时
				Counter: function() {
					if (vm.type == 1) return;

					var finish = Date.parse(vm.finish.replace(/-/g, "/"));
					// var finish = Date.parse("2019/11/08 15:55:00");
					clearInterval(vm.timer);

					function fxCountDown(This) {
						var stamps = Math.round((finish - Date.now()) / 1000);
						if (stamps > 0) {
							var dd = Math.floor(stamps / (24 * 3600));
							var hh = Math.floor((stamps - dd * 24 * 3600) / 3600);
							var mm = Math.floor((stamps - dd * 24 * 3600 - hh * 3600) / 60);
							var ss = stamps % 60;

							vm.counter = dd + "天" + hh + "时 " + (("0" + mm).substr(-2)) + ":" + (("0" + ss).substr(-2))
						} else {
							vm.counter = "已结束"
							clearInterval(vm.timer);
						}
					}
					fxCountDown(this);
					vm.timer = setInterval(function() {
						fxCountDown(this);
					}, 1000)
				},

				//打开参数选择面板
				OpenSku: function(type) {
					// alert(type)
					vm.mode = type;
					if (vm.counter == "已结束") {
						hhPanel.msg('预售已结束')
						return;
					}

					if (!this.options.skus.length) {
						var skuid = '',num = 1;
						if (type == 'cart') {
							//hhPanel.msg("假设已经加入购物车");
              vm.addCart(id, skuid, num)
						} else {
							vm.buy(id, skuid, num)
						}
					} else
						vm.payment.show = true;
				},

				//收藏
				Collection: function(id) {
					AjaxSafe({
						url: '/xapp/product/addCollection',
						data: {
							product_id: id
						},
						loader: true,
						success: function(ret) {
							hhPanel.msg(ret.msg);
							vm.getCommodity(false)
							api.refreshHeaderLoadDone() //关闭下拉刷新状态
						},
						failed: function(err) {
							api.refreshHeaderLoadDone() //关闭下拉刷新状态
							alert("网络故障！");
						}
					})
				},

			},
		});
	}
</script>

</html>
